<template>
	<view class="content">
		<!-- #ifdef MP-WEIXIN -->
		<!-- 插屏广告 -->
		<adInter></adInter>

		<!-- 激励视频设置 -->
		<ad-rewarded-video ref="adRewardedVideo" adpid="1501138598" :preload="false" :disabled="true"
			v-slot:default="{adVideoLoading, adVideoError}" @load="onadload" @close="onadclose" @error="onaderror">
			<view class="ad-error" v-if="adVideoError">{{adVideoError}}</view>
		</ad-rewarded-video>
		<!-- #endif -->

		<!-- 文本内容 -->
		<view class="editor-content">
			<view class="title">
				<u--text prefixIcon="pushpin-fill" iconStyle="font-size: 19px;color:#1acc89;margin-right:8rpx;"
					text="待检测内容"></u--text>

				<view class="text-right">
					<u-button text="清空内容" size="mini" iconColor="#f56c6c" color="#fef0f0" icon="trash"
						:customStyle="{color:'#f56c6c'}" @click="resetQuestion">
					</u-button>
				</view>
			</view>
			<view class="rounded border result">
				<editor id="editor" class="textarea" placeholder="请输入文案" @ready="onEditorReady" @input="setValue()">
				</editor>
			</view>
		</view>

		<!-- 审核结果说明 -->
		<view class="result-content">
			<view class="title">
				<u--text prefixIcon="warning-fill" iconStyle="font-size: 19px;color:#f9ae3d;margin-right:8rpx;"
					text="检测结果"></u--text>
			</view>
			<view class="rounded border result">
				<view v-if="!conclusionType" style="color: rgba(0,0,0,.5);">在此处查看检测结果</view>
				<view v-if="conclusionType == 1">文本内容合规</view>
				<view v-if="conclusionType == 2" v-for="(item,key) in authInfo" :key="key">
					<text style="color: orangered;">{{item.msg}}</text>: {{item.words}}
				</view>
			</view>
		</view>

		<view class="tool-bottom-box">
			<view class="tool-btn-item">
				<u-button size="medium" shape="circle" icon="checkmark" iconColor="#1acc89" @click="textAuth()"
					color="#f0faf8" text="提交审核" :customStyle="{'color':'#1acc89','margin-right':'20rpx'}">
				</u-button>
			</view>
			<view class="tool-btn-item">
				<u-button size="medium" shape="circle" icon="edit-pen" iconColor="#f56c6c" @click="textReplace()"
					text="替换为拼音" color="#fef0f0" :customStyle="{color:'#f56c6c'}">
				</u-button>
			</view>
		</view>
		<view class="tool-bottom-box">
			<view class="tool-btn-item">
				<u-button size="medium" shape="circle" style="margin-right: 20rpx;" plain type="warning"
					icon="file-text" @click="pasteContent()" text="粘贴文案">
				</u-button>
			</view>
			<view class="tool-btn-item">
				<u-button size="medium" shape="circle" @click="copy()" icon="cut" type="success" plain text="复制文案">
				</u-button>
			</view>
		</view>

		<!-- #ifdef MP-WEIXIN -->
		<!-- 信息流广告 -->
		<view class="ad-view">
			<adBanner></adBanner>
		</view>
		<!-- #endif -->
	</view>
</template>
<script>
	import adInter from '@/components/adInter/adInter.vue';
	import adBanner from '@/components/adBanner/adBanner.vue';
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools';
	export default {
		components: {
			adInter,
			adBanner
		},
		data() {
			return {
				content: '',
				adVideoLoading: false,
				adVideoError: '',
				userinfo: {},
				buttonCustomStyle: {
					'background-color': '#1acc89'
				},
				authInfo: '',
				conclusionType: 0,
				encodeId: 0
			}
		},
		onShareAppMessage(res) {
			//分享前校检是否登录，若为登陆则提示登录，已确定邀请关系
			let islogin = this.checkToken();
			if (!islogin) {
				uni.navigateTo({
					url: '/pages/login/index'
				});
				return false;
			}
			return {
				title: '给你推荐一个超好用的图片转文字工具，解放双手！',
				path: '/pages/index/index',
			}
		},
		methods: {
			checkToken() {
				const token = uni.getStorageSync('token');
				if (token == '' || token == undefined) {
					return false
				} else {
					return true
				}
			},
			async getUserInfo() {
				return this.$http.requestApi('POST', 'client/getUserInfo', {
					loginType: 1,
					plat_type: this.$platType
				});
			},
			resetQuestion() {
				this.content = '';
				this.editorCtx.setContents({
					html: ''
				});
			},
			copy() {
				this.editorCtx.getContents({
					success: (res) => {
						uni.setClipboardData({
							data: res.text, //要被复制的内容
							success: () => { //复制成功的回调函数
								uni.showToast({ //提示
									title: "复制成功",
									icon: 'none'
								})
							}
						});
					}
				});
			},
			pasteContent() {
				var that = this;
				uni.getClipboardData({
					success: function(res) {
						that.content = res.data;
						that.editorCtx.setContents({
							html: that.content
						});
					}
				});
			},
			onReady() {
				// #ifdef MP-WEIXIN
				this.$refs.adRewardedVideo.load()
				// #endif
			},
			onadload(e) {
				this.adVideoLoading = false;
			},
			onadclose(e) {
				const detail = e.detail
				// 用户点击了【关闭广告】按钮
				if (detail && detail.isEnded) {
					// 正常播放结束
					this.$http.requestApi('POST', 'client/reward/setUseableNum', {
						loginType: 1,
						plat_type: this.$platType
					}).then(res => {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					});
				} else {
					//播放中途退出
					uni.showToast({
						icon: "none",
						title: '中途退出，获取免费机会失败'
					})
				}
			},
			onaderror(e) {
				// 广告加载失败
				this.adVideoLoading = false;
				this.adVideoError = e;
			},
			//editor编辑器
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
			},
			setValue() {
				this.editorCtx.getContents({
					success: (res) => {
						this.content = res.text;
					}
				});
			},
			async textAuth() {
				let _this = this;
				//校检用户是否为vip
				let userinfo = await _this.getUserInfo();
				if (!userinfo.data.useable_num) {
					uni.showModal({
						title: '温馨提示',
						content: '您的免费使用次数不足，请观看视频或免费签到获得使用次数',
						cancelText: '立即签到',
						confirmText: '观看视频',
						success: function(res) {
							if (res.confirm) {
								//立即观看
								_this.adVideoLoading = true;
								_this.$refs.adRewardedVideo.show();
							} else if (res.cancel) {
								//立即签到
								uni.navigateTo({
									url: '/pages/user/signin'
								});
							}
						}
					});
					return false;
				}
				_this.conclusionType = 0;
				_this.$http.requestApi('POST', 'ocr/img/textAuth', {
					content: encodeURIComponent(_this.content),
					loginType: 1
				}).then(res => {
					if (res.status == 200) {
						_this.authInfo = res.data.authDetail;
						_this.conclusionType = res.data.conclusionType;
						_this.encodeId = res.data.encode_id;
						_this.editorCtx.setContents({
							html: res.data.content
						});
					} else {
						//调用失败
						uni.showToast({
							icon: "none",
							title: res.msg,
						})
					}
				})
			},
			textReplace() {
				let that = this;
				that.$http.requestApi('POST', 'ocr/content/getForbidContentToPinyin', {
					avg: that.encodeId,
					loginType: 1
				}).then(res => {
					if (res.status == 200) {
						that.content = res.data.trans_result;
						that.editorCtx.setContents({
							html: that.content
						});
					} else {
						//调用失败
						uni.showToast({
							icon: "none",
							title: res.msg,
						})
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	.content {
		padding-bottom: 40rpx;
		width: 94%;
		margin: 30rpx auto;
	}

	.editor-content {
		.result {
			height: 300rpx;
			padding: 20rpx;
			background-color: #fff;
			overflow: auto;
		}
	}

	.result-content {
		margin: 30rpx auto;

		.result {
			height: 300rpx;
			padding: 20rpx;
			background-color: #fff;
			overflow: auto;
		}
	}


	::-webkit-scrollbar {
		display: none;
	}

	.tool-bottom-box {
		display: flex;
		margin-bottom: 30rpx;

		.tool-btn-item {
			text-align: center;
			width: 46%;
			flex: 1;

			&:nth-child(2) {
				margin-left: 4%;
			}
		}
	}

	.title {
		display: flex;
		margin: 20rpx 0;
		font-weight: bold;
		font-size: 32rpx;
	}
</style>